<template>
	<button @click="up">{{kszi.name}}</button>

	<!-- 卡片容器 -->
	<view class="card-container">
		<!-- 状态提示层 -->

		<!-- 卡片堆叠 -->
		<view v-for="(card, index) in cardStack" :key="card._id" class="card" :style="{
        zIndex: cardStack.length - index,
        transform: `translateX(${activeCard.translateX}px) rotate(${activeCard.rotate}deg)`
      }" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">

			<text class="word">{{ card.word }} </text>
			<text v-if="kszi.bol" class="pronunciation">{{card.pos}}/{{ card.kana}}/</text>


		</view>

	</view>
	<view class="hint-layer">
		<text class="hint-left">不认识</text>
		<text class="hint-right">认识</text>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"

	// 您原有的script setup内容...
	const kszi = ref({
		name: "开启假名",
		bol: false
	}); // 注意闭合的括号和分号
	const id = ref({
		sum: 0,
		us: 10,
		bendi: 0,
		jltp:""

	})
	onLoad((e) => {
		
		id.value.jltp = "N" + e.id
	
	})

	const sum = ref(0)


	const k = ref(false)
	const bendi = uni.getStorageSync('key');
	if (bendi != 0) {
		k.value = true
		id.value.bendi = bendi
		console.log(id.value);
	}
	const y = ref(true)
	const x = ref(0)
	const x2 = ref(0)
	const word = uniCloud.importObject("getJLTP")

	if (id.value.ben != 0) {
		id.value.yy = id.value.ben
	}
	const suju = async () => {
		let res = await word.get(id.value)

		id.value.sum++

		x.value = id.value.sum * id.value.us
		cardStack.value.push(...res.data)
	}

	const suju2 = async () => {

		let res = await word.get(id.value)
		cardStack.value.push(...res.data)
		x2.value = id.value.bendi + 10
	}

	if (k.value) {
		suju2();
	} else {
		suju();
	}

	function up() {
		if (kszi.value.bol) {
			kszi.value.name = "开启假名"
			kszi.value.bol = false
		} else {
			kszi.value.name = "关闭假名",
				kszi.value.bol = true
		}
	}
	// 卡片数据
	const cardStack = ref([])

	// 当前激活卡片状态
	const activeCard = reactive({
		startX: 0,
		translateX: 0,
		rotate: 0
	})

	// 触摸开始
	const handleTouchStart = (e) => {

		activeCard.startX = e.touches[0].clientX
	}

	// 触摸移动
	const handleTouchMove = (e) => {

		const currentX = e.touches[0].clientX
		const deltaX = currentX - activeCard.startX

		activeCard.translateX = deltaX
		activeCard.rotate = deltaX * 0.15 // 探探式倾斜系数[2,4](@ref)

		
	}

	// 触摸结束
	const handleTouchEnd = () => {

		const threshold = 120 // 触发阈值[2](@ref)

		if (Math.abs(activeCard.translateX) > threshold) {
			if (k.value) {

			
				id.value.bendi++
				uni.setStorageSync('key', id.value.bendi);
				if (id.value.bendi == x2.value) {

					
					suju2()
				}
			} else {
				sum.value++
				uni.setStorageSync('key', sum.value);
				if (sum.value == x.value) {

					suju()
				}
			}
			// 执行滑动动画
			animateCardOut(activeCard.translateX > 0 ? 'right' : 'left')
		} else {
			// 复位动画
			resetCardPosition()
		}
	}

	// 卡片飞出动画
	const animateCardOut = (direction) => {
		const targetX = direction === 'right' ? 500 : -500
		activeCard.translateX = targetX
		activeCard.rotate = targetX * 0.2

		setTimeout(() => {
			// 移除当前卡片并触发操作
			const removedCard = cardStack.value.shift()
			handleCardAction(removedCard, direction)

			// 加载新卡片（示例数据）
			// if(cardStack.value.length < 3) {
			//   cardStack.value.push(generateNewCard())
			// }

			// 重置状态
			resetCardPosition()
		}, 300)
	}


	const setstor = ref([])
	// 卡片操作处理
	const handleCardAction = (card, direction) => {
		// console.log(`${direction === 'right' ? '已掌握' : '需复习'}: ${card}`)
		if (direction === 'right') {
			console.log('已掌握:' + card.word)



		} else {
			console.log('需复习:' + card.word);

			setstor.value.push({
				word: card.word,
				translation: card.translation,
				pos: card.pos,
				kana: card.kana
			})


			uni.setStorageSync('storage_key', setstor.value);

		}

		// 这里可以添加API调用或状态存储逻辑[3](@ref)
		// suju.value = `${direction === 'right' ? '已掌握' : '需复习'}: ${card.word}`
		// console.log(suju.value);

	}

	const value = uni.getStorageSync('storage_key');
	setstor.value.push(...value)

	// 位置复位
	const resetCardPosition = () => {
		activeCard.translateX = 0
		activeCard.rotate = 0
	}
</script>

<style lang="scss">
	.card-container {
		position: relative;
		height: 60vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hint-layer {

		margin: auto;
		bottom: 20%;
		width: 80%;
		display: flex;
		justify-content: space-between;
		margin-top: 150rpx;

		&>text {
			font-size: 24px;
			opacity: 0.3;
			padding: 0 30px;

			&.hint-left {
				color: #4CAF50;
			}

			&.hint-right {
				color: #F44336;
			}
		}
	}

	.card {

		position: absolute;
		width: 70%;
		height: 50vh;
		background: #FFF;
		border-radius: 20px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
		will-change: transform;
		/* 性能优化[3](@ref) */
		margin-top: 300rpx;

		.word {
			font-size: 32px;
			font-weight: 600;
			margin-bottom: 15px;
		}

		.pronunciation {
			color: #666;
			font-size: 18px;
		}
	}
</style>